<template>
  <div>
    <div>
      <van-nav-bar left-arrow @click-left="onClickLeft"> </van-nav-bar>
      <van-uploader v-model="fileList" :after-read="afterRead" name="file">
      </van-uploader>
      <input class="inp" type="text" v-model="title" placeholder="标题" />
      <textarea v-model="detail" class="inp2" name="" id="" cols="43" rows="8"
        placeholder="分享你的运动生活，发布运动相关的图文"></textarea>
    </div>
    <div class="btn" @click="Onpublish" block>发布</div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Uploader, Toast } from "vant";
import httpApi from '@/http';
import storage from '@/utils/Storage';
import BaseUrl from "@/http/BaseUrl";


Vue.use(NavBar);
Vue.use(Uploader);

export default {
  data() {
    return {
      fileList: [],
      title: '',
      detail: '',
      pic: [],
      time:''
    };
  },
  mounted() {
    this.time=new Date().getTime()
  },
  methods: {
    Onpublish() {
      httpApi.shareApi.shareAdd({ uid: storage.get(storage.KEY_USER).uid, title: this.title, detail: this.detail, pic: this.pic.join(','),time:this.time }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          Toast('发布成功')
          this.$router.push('/home/find')
        } else {
          Toast('发布失败')
        }
      })
    },
    onClickLeft() {
      this.$router.push('/home/find')
     },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      console.log(file.file.name);
      let str = ''

      // this.pic.push(file.file.name)
      // 1.如果用户未选择上传文件，则弹窗提醒
      if (!file.file) {
        alert("请选择要上传的文件")
        return
      }

      // 3.限制上传文件的类型，比如只允许图片上传
      // 字符串以 image 开头的正则: /^image/

      if (/^image/.test(file.file.type) == false) {
        alert("只允许上传图片类型的文件");
        return;
      }

      // 文件信息必须 装到 Form 表单类型的数据中 才能上传
      const fd = new FormData(); //表单类型的数据对象
      fd.append("file", file.file);

      console.log(fd);

      $.ajax({
        url: BaseUrl.UPLOADURL+'/upload', 
        type: "POST", //请求方式,必须是post
        // 两个固定设置，与编码类型有关
        processData: false, // 不对内容进行编码，默认会编码成字符串
        contentType: false, // 不更改内容类型，默认会改成字符串模式
        data: fd, // 要上传的数据
        success: (res) => {
          console.log(res);
          str = res.data
          this.pic.push(str)
          console.log(this.pic);
        },
      });
    },
  },
};
</script>

<style scoped>
.van-nav-bar {
  margin-left: -10px;
}

::v-deep .van-nav-bar .van-icon {
  color: black;
}

:v-deep .van-uploader__input {
  margin-left: 10px;
}

.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.van-uploader__wrapper {
  margin-left: 5px;
}

.inp {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  border: none;
  outline: none;
  padding: 10px 5px 10px 5px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

.inp2 {
  margin-top: 10px;
  border: none;
  outline: none;
  padding-left: 5px;
  font-size: 15px;
  border-bottom: 1px solid #eee;
}

.btn {
  width: 80%;
  border-radius: 25px;
  position: absolute;
  bottom: 40px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  background-color: #07C160;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
}

</style>
